* {
  padding: 0;
  margin: 0;
}
html {
  overflow: hidden;
}

.demo-pot {
  position: absolute;
  left: 65%;
  bottom: 50px;
  z-index:1000;
  transform: translateX(-50%);
}

.demo-pot img {
  width: 100px;
  height: 56px;
}

.demo-pot-animation {
  animation: xAxis 1.5s forwards linear;
}

.demo-pot-animation img {
  display: block;
  /* background-color: #fff; */
  width: 100px;
  animation: yAxis 1.5s forwards cubic-bezier(.55, 0, .85, .36);
}

@keyframes yAxis {
  to {
    /* animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); */
    transform: translateY(-225px) rotate(-45deg);
  }
}

@keyframes xAxis {
  100% {
    /* animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); */
    /* transform: translateX(00%); */
  }
  /* 100% {
    transform:translateX(100px) rotate(-45deg);
  } */
}

@keyframes rotate {
  to {
    transform:rotate(-45deg)
  }
}

.frame {
  position: relative;
  justify-content: center;
  background-image:url("./images/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
}
div.plant {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
}
div.water {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  visibility: hidden;
}
div.water.show{
  visibility: visible;
}
